import React, { Suspense, lazy } from "react";
import ReactDOM from "react-dom";
import "bigbear-ui/dist/index.css";
import { Provider } from "react-redux";
import { ConnectedRouter } from "connected-react-router";
import history from "./store/history";
import store, { persistor } from "./store/store";
import "./styles/style.scss";
import { Switch, Route, Redirect } from "react-router";
import "./IconLibrary";
import Tabs from "./components/Tabs";
import { PersistGate } from "redux-persist/integration/react";
ReactDOM.render(
	<Provider store={store}>
		<PersistGate loading={null} persistor={persistor}>
			<ConnectedRouter history={history}>
				<main className="main-container">
					<Suspense fallback={null}>
						<Switch>
							<Route path="/" exact component={lazy(() => import("@/routes/Home"))} />
							<Route path="/cart" component={lazy(() => import("@/routes/Cart"))} />
							<Route
								path="/profile"
								component={lazy(() => import("@/routes/Profile"))}
							/>
							<Route
								path="/register"
								component={lazy(() => import("@/routes/Register"))}
							/>
							<Route path="/login" component={lazy(() => import("@/routes/Login"))} />
							<Route
								path="/detail/:id"
								component={lazy(() => import("@/routes/Detail"))}
							/>
							<Redirect to="/" />
						</Switch>
					</Suspense>
					<Tabs></Tabs>
				</main>
			</ConnectedRouter>
		</PersistGate>
	</Provider>,
	document.getElementById("root")
);
